import {designPage, onMounted, useRefs} from "@peryl/react-compose";
import {usePageService} from "../../../modules/micro/usePageService";
import {i18n, Icon, Tooltip} from "plain-design";
import {useEchartsColor} from "../../../components/useEchartsColor";
import {RollingNumber} from "../../../common/RollingNumber";

export default designPage(() => {

  const { microApp } = usePageService();
  const { color3, color6 } = useEchartsColor();

  const { refs, onRef } = useRefs({ chartEl: HTMLDivElement });

  onMounted(async () => {

    const echarts = await microApp.resource.load('echarts', window);
    const ins = echarts.init(refs.chartEl!);

    ins.setOption({
      grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
      },
      xAxis: {
        show: false,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        show: false,
        type: 'value'
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
        lineStyle: {
          color: color6
        },
        itemStyle: {
          color: color3
        }
      }],
      visualMap: [{
        show: false,
        type: 'value',
        seriesIndex: 0,
        min: 150,
        max: 300
      }]
    });
  });

  return () => (
    <div className="pro-data-statistic-summary-card">
      <div className="pro-data-statistic-summary-card-title">
        <span>{i18n.$intl('page.dataStatistic.activityOperation').d('活动运营')}</span>
        <Tooltip message={i18n.$intl('page.dataStatistic.more').d('更多')}>
          <Icon icon="pi-apps"/>
        </Tooltip>
      </div>
      <div className="pro-data-statistic-summary-card-result">
        <RollingNumber val={87.66}/>%
      </div>
      <div ref={onRef.chartEl} className="pro-data-statistic-chart-el"/>
      <div className="pro-data-statistic-summary">
        <span>{i18n.$intl('page.dataStatistic.userSatisfaction').d('用户满意度：')}</span>
        <span><RollingNumber val={88.66}/>%</span>
        <Icon icon="pi-caret-up" status={'success'}/>
      </div>
    </div>
  );
});
